<template>
  <main>
    <div class="main">
      <h3>温馨提示</h3>
      <div class="font">
        <p>盲盒开盒存在概率性,请理性消费。</p>
        <p>1.开盒概率说明</p>
        <span
          >盒内每一款商品概率均在该盲盒详情页内显示，每款盲盒内所有商品概率总和为100%;拆盒必出其中一款商品,无空包。 </span
        ><br />
        <p>2.商品回收说明</p>
        <span
          >商品分解回收可获得一定贝壳和星值,每个商品不同比例,经用户点击确认后完成分解，贝壳将返回账户余额可继续用于开盒，商品一经分解回收不可找回,不支持提取现金,星值可用于星值商城兑换商品。 </span
        ><br />
        <p>3.商品包邮说明</p>
        <span>盲盒商品满2件享受包邮,偏远地区不包邮。</span><br />
      </div>
      <div class="box1" v-show="btn1">
        <button @click="isShowBtn2">确定</button>
      </div>
      <!-- <div class="box2" :info="btn2" v-show="btn2">
        <button @click="subInfo">确定2</button>
      </div> -->
    </div>
  </main>
</template>

<script>
export default {
  data() {
    return {
      btn1: true,
      btn2: false,
    };
  },
  methods: {
    isShowBtn2() {
      this.$router.push({ path: "login" });
    },
    subInfo() {
      this.$emit("info", this.btn2);
    },
  },
};
</script>

<style scoped>
main {
  width: 375px;
  height: 367px;
  position: relative;
}
.main {
  width: 375px;
  height: 373px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
.font {
  width: 336px;
  margin: 0 19.5px;
  font-size: 12px;
  color: #6c6c6c;
}
h3 {
  text-align: center;
  font-size: 18px;
  color: #101010;
}
.box1 button {
  width: 123px;
  height: 39px;
  font-size: 14px;
  background: #a4adb3;
  margin: 0 126px;
}
</style>
